import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm,Card } from 'antd'
import List from './List'
import Filter from './Filter'
import Modal from './Modal'
import { Tabs } from 'antd'
import { TextMessage,PicMessage,VoiceMessage,VideoMessage } from './components'
import { color } from '../../utils'
const Mock = require('mockjs')

debugger
const bodyStyle = {
  bodyStyle: {
    height: 432,
    background: '#fff',
  },
}

const TabPane = Tabs.TabPane

const EnumPostStatus = {
  文字消息  : 1,
  图片消息 : 2,
  语音消息  :3,
  视频消息 :4,
  小视频消息:5
}

let activeKey = "1";

const Searchmessage = ({ location, dispatch, searchmessage, loading }) => {
  const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = searchmessage
  const { pageSize } = pagination
  const { query = {}, pathname } = location

  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['searchmessage/update'],
    title: `${modalType === 'create' ? 'Create searchmessage' : 'Update searchmessage'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: `searchmessage/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'searchmessage/hideModal',
      })
    },
  }

  const listProps = {
    dataSource: list,
    loading: loading.effects['searchmessage/query'],
    pagination,
    location,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'searchmessage/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'searchmessage/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'searchmessage/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  // TextMessageProperties
  const textMessageProps = {
      dataSource: list,
      loading: loading.effects['searchmessage/query'],
      pagination,
      location,
      isMotion,
      onChange (page) {
        const { query, pathname } = location
        dispatch(routerRedux.push({
          pathname,
          query: {
            ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
      },
      onDeleteItem (id) {
        dispatch({
          type: 'searchmessage/delete',
          payload: id,
        })
      },
      onEditItem (item) {
        dispatch({
          type: 'searchmessage/showModal',
          payload: {
            modalType: 'update',
            currentItem: item,
          },
        })
      },
    }

  // PicMessageProperties
  const picMessageProps = {
    dataSource: list,
    loading: loading.effects['searchmessage/query'],
    pagination,
    location,
    isMotion,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
        page: page.current,
        pageSize: page.pageSize,
      },
    }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'searchmessage/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'searchmessage/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
  }

  // VoiceMessageProperties
  const voiceMessageProps = {
    dataSource: list,
    loading: loading.effects['searchmessage/query'],
    pagination,
    location,
    isMotion,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
        page: page.current,
        pageSize: page.pageSize,
      },
    }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'searchmessage/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'searchmessage/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
  }

  // VideoMessageProperties
  const videoMessageProperties = {
    dataSource: list,
    loading: loading.effects['searchmessage/query'],
    pagination,
    location,
    isMotion,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
        page: page.current,
        pageSize: page.pageSize,
      },
    }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'searchmessage/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'searchmessage/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
  }

  const filterProps = {
    isMotion,
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        query: {
          ...value,
          page: 1,
          pageSize,
        },
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/searchmessage',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/searchmessage',
      }))
    },
    onAdd () {
      dispatch({
        type: 'searchmessage/showModal',
        payload: {
          modalType: 'create',
        },
      })
    },
    switchIsMotion () {
      dispatch({ type: 'searchmessage/switchIsMotion' })
    },
  }

  const handleDeleteItems = () => {
    dispatch({
      type: 'searchmessage/multiDelete',
      payload: {
        ids: selectedRowKeys,
      },
    })
  }

  const handleTabClick = (key = '1') => {
    activeKey = key
    debugger
    dispatch(routerRedux.push({
      pathname,
      query: {
        equal_msgType: activeKey,
      },
    }))
  }
  return (
    <div className="content-inner">
    <Tabs activeKey={activeKey ? activeKey:'1'} onTabClick={handleTabClick}>
    <TabPane tab="文字消息" key={String(EnumPostStatus.文字消息)}>
      <Filter {...filterProps} />
      <TextMessage {...textMessageProps} />
  </TabPane>
  <TabPane tab="图片消息" key={String(EnumPostStatus.图片消息)}>
    <Filter {...filterProps} />
    <PicMessage {...picMessageProps} />
</TabPane>
  <TabPane tab="语音消息" key={String(EnumPostStatus.语音消息)}>
  <Filter {...filterProps} />
  <VoiceMessage {...voiceMessageProps} />
</TabPane>
  <TabPane tab="视频消息" key={String(EnumPostStatus.视频消息)}>
  <Filter {...filterProps} />
  <VideoMessage {...videoMessageProperties} />
</TabPane>
  <TabPane tab="小视频消息" key={String(EnumPostStatus.小视频消息)}>
<Filter {...filterProps} />
  <VideoMessage {...videoMessageProperties} />
</TabPane>
  </Tabs>
    </div>
  )
}

Searchmessage.propTypes = {
  searchmessage: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ searchmessage, loading }) => ({ searchmessage, loading }))(Searchmessage)
